<template>
    <div class="workOrderBarChart">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">实时工单完成情况</span>
        </div>
        <div class="content">
            <div></div>
            <div class="BarChart" ref="chartContainer"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

const chartContainer = ref(null);
let myChart = null as any;
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
let echartData = [
    {
        name: '已关闭',
        value: '10',
    },
    {
        name: '处理中',
        value: '20',
    },
    {
        name: '未分配',
        value: '15',
    },
    {
        name: '未接受',
        value: '25',
    },
    {
        name: '已完成',
        value: '35',
    },
];
let formatNumber = function (num: any) {
    let reg = /(?=(\B)(\d{3})+$)/g;
    return num.toString().replace(reg, ',');
};
const updateChart = () => {
    if (!chartContainer.value) return;

    // Initialize the chart
    myChart = echarts.init(chartContainer.value);

    // Define chart options
    const option = {
        tooltip: {
            show: false
        },
        legend: {
            show: false,
            textStyle: {
                color: "#",
                fontSize: 11,
            },
        },
        grid: {
            left: "3%",
            right: "3%",
            bottom: "5%",
            top: "22%",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            data: [
                "1",
                "2",
                "3",
                "4",
                "5",
                "6",
                "7",
            ],
            axisLabel: {
                formatter: "{value}",
                color: "white", // 文本颜色
            },
            axisTick: { show: false },
        },
        yAxis: [
            {
                //   去网格线
                splitLine: {
                    show: false,
                },
                type: "value",
                // name: "kW.h",
                // 标题名称颜色
                nameTextStyle: {
                    color: "white",
                    fontSize: 12,
                    fontWeight: 800,
                },
                axisLine: {
                    show: true ,
                    lineStyle: {
                        lineStyle: {
                            color: "rgba(220, 220, 220, 0.2)",
                        },
                    },
                },
                axisLabel: {
                    formatter: "{value}",
                    color: "white", // 文本颜色
                },
            },
        ],
        series: [
            {
                name: "已完成",
                type: "bar",
                stack: "account",
                barMaxWidth: 6,
                itemStyle: {
                    color: 'rgba(0, 227, 254, 1)',
                },
                data: [30, 38, 40, 43, 24, 24, 20],
            },
            {
                name: "未接受",
                type: "bar",
                stack: "account",
                barMaxWidth: 6,
                itemStyle: {
                    color: 'rgba(254, 190, 38, 1)'
                },
                data: [20, 20, 15, 15, 40, 15, 20],
            },
            {
                name: "处理中",
                type: "bar",
                stack: "account",
                barMaxWidth: 6,
                itemStyle: {
                    color: 'rgba(20, 201, 122, 1)'
                },
                data: [10, 20, 25, 30, 10, 10, 20],
            },

        ],
    }

    // Set options
    myChart.setOption(option);

    // Handle resize
    window.addEventListener('resize', () => {
        myChart.resize();
    });
};

onMounted(() => {
    updateChart();
});
</script>

<style lang="scss" scoped>
.workOrderBarChart {
    transition: transform 0.5s ease;
    position: absolute;
    z-index: 999;
    // padding-left: vh(40);
    // padding-right: vh(38);
    background: url(@/assets/images/dailyMaintenance/bx02.png) no-repeat;
    background-size: 100% 100%;
    left: vw(20);
    top: vh(591);
    width: vw(422);
    height: vh(412);

    .boxTitle {
        img {
            width: vh(16);
            height: vh(14);
        }
    }

    .content {
        padding-top: vh(60);
        .BarChart {
            width: 100%;
            height: vh(300);
        }
    }
}
</style>